<!--
  描述：拖放地图组件，默认尺寸是 500 * 300

  接收属性参数：
    lat: 纬度
    lng: 经度

  自定义事件：
    drag: 拖放完成事件

  示例：
    <mapDrag @drag="dragMap" lat="22.574405" lng="114.095388"></mapDrag>
-->
<template>
  <div class="m-map">
    <div class="search" v-if="placeSearch">
      <input type="text" placeholder="请输入关键字" v-model="searchKey" />
      <button type="button" @click="handleSearch">搜索</button>
      <div id="js-result" v-show="searchKey" class="result"></div>
    </div>
    <div id="js-container" class="map">正在加载数据 ...</div>
  </div>
</template>
<script>

import remoteLoad from "@/util/remoteLoad.js";
import { MapKey, MapKeyAPI } from "@/config/config";
import axios from "axios";
export default {
  props: ["MapCityName"],
  data() {
    return {
      searchKey: "",
      placeSearch: null,
      dragStatus: false,
      AMapUI: null,
      AMap: null,
      lat: null,
      lng: null,
      adcode: "",
      citycode: "",
    };
  },
  watch: {
    searchKey() {
      if (this.searchKey === "") {
        this.placeSearch.clear();
      }
      /**
       * @Descripttion: 城市信息改变后运行的函数 重新渲染
       * @test: test value
       * @msg:
       * @param {*MapCityName,}
       * @return {*}
       * @Author: 作者:刘洋(L13831467435@163.com)
       */
    },
    MapCityName() {
      let address = "";
      address = this.MapCityName[0] + this.MapCityName[1]+this.MapCityName[2];
      // axios
      //   .get(
      //     // "/amap?address=" +
      //     "https://restapi.amap.com/v3/geocode/geo?address=" +
      //       address +
      //       "&output=JSON&key=" +
      //       MapKeyAPI
      //   )
      fetch(
        "https://restapi.amap.com/v3/geocode/geo?address="
        + address + "&output=JSON&key=" + MapKeyAPI,
          {
            method: 'get'
          }
        )
        .then(async response => {
          let data = await response.json();
          // console.log(data)
          let newArr = data.geocodes[0].location.split(",");
          this.lat = newArr[1]; //纬度
          this.lng = newArr[0]; //经度
          let keywords = "";
          if (this.MapCityName[1].indexOf("市")) {
            keywords = this.MapCityName[1];
          } else {
            keywords = this.MapCityName[0];
          }
          //获取区域码  城市码
          fetch("https://restapi.amap.com/v3/config/district?keywords="
                 + keywords + "&key=" + MapKeyAPI,
                {
                  method: 'get'
                }
            )
            .then(async response => {
              let rea = await response.json()
              // console.log(rea,'response===市区')
              const { citycode, adcode } = rea.districts[0];
              let data = { citycode, adcode };
              this.$emit("code", data);
              this.initMap();
            });
        });
    },
  },
  methods: {
    // 搜索
    handleSearch() {
      if (this.searchKey) {
        this.placeSearch.search(this.searchKey);
      }
    },
    // 实例化地图
    initMap() {
      let MapCityName = "";
      if (this.MapCityName.length !== 0) {
        if (this.MapCityName[1].indexOf("市")) {
          MapCityName = this.MapCityName[1];
        } else {
          MapCityName = this.MapCityName[0];
        }
      }

      // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
      let AMapUI = (this.AMapUI = window.AMapUI);
      let AMap = (this.AMap = window.AMap);
      AMapUI.loadUI(["misc/PositionPicker"], (PositionPicker) => {
        let mapConfig = {
          zoom: 16,
          cityName: MapCityName,
        };
        if (this.lat && this.lng) {
          mapConfig.center = [this.lng, this.lat];
        }
        let map = new AMap.Map("js-container", mapConfig);
        // 加载地图搜索插件
        AMap.service("AMap.PlaceSearch", () => {
          this.placeSearch = new AMap.PlaceSearch({
            pageSize: 5,
            pageIndex: 1,
            citylimit: true,
            city: MapCityName,
            map: map,
            panel: "js-result",
            extensions: "base", //返回信息详略，默认为base（基本信息）
          });
        });
        // 启用工具条
        AMap.plugin(["AMap.ToolBar"], function () {
          map.addControl(
            new AMap.ToolBar({
              position: "RB",
            })
          );
        });
        // 创建地图拖拽
        let positionPicker = new PositionPicker({
          mode: "dragMap", // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
          map: map, // 依赖地图对象
        });
        // 拖拽完成发送自定义 drag 事件
        positionPicker.on("success", (positionResult) => {
          // 过滤掉初始化地图后的第一次默认拖放
          if (!this.dragStatus) {
            this.dragStatus = true;
          } else {
            this.$emit("drag", positionResult);
          }
        });
        // 启动拖放
        positionPicker.start();
      });
    },
  },
  // mounted () {
  //   this.initMap();
  // },
  async created() {
    // 已载入高德地图API，则直接初始化地图
    if (window.AMap && window.AMapUI) {
      this.initMap();
      // 未载入高德地图API，则先载入API再初始化
    } else {
      await remoteLoad(`http://webapi.amap.com/maps?v=1.3&key=${MapKey}`);
      await remoteLoad("http://webapi.amap.com/ui/1.0/main.js");
      if(window.AMapUI) {
        this.initMap();
      }else {
        //ui加载较慢设置1S延时器
        setTimeout(() => {
          this.initMap();
        }, 1000);
      }
      
    }
  },
};
</script>

<style lang="css">
.m-map {
  min-width: 500px;
  min-height: 300px;
  position: relative;
}
.m-map .map {
  width: 100%;
  height: 300px;
}
.m-map .search {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 285px;
  z-index: 1;
}
.m-map .search input {
  width: 180px;
  border: 1px solid #ccc;
  line-height: 18px;
  padding: 5px;
  outline: none;
  height: 16px;
}
.m-map .search button {
  line-height: 26px;
  background: #fff;
  border: 1px solid #ccc;
  width: 50px;
  text-align: center;
}
.m-map .result {
  max-height: 300px;
  overflow: auto;
  margin-top: 10px;
}
</style>
